<template>
  <div class="all-approval search-list-container searchHeight">
    <approve-detail
      :type="detail.status==7?1:4"
      :detail="detail"
      v-if="isShowDetail"
      @handleCancelDetail="handleCancelDetail"
    ></approve-detail>
    <template v-else>
      <div class="search-wrapper">
        <el-form
          :model="queryParams"
          ref="queryForm"
          size="small"
          :inline="true"
          label-width="auto"
        >
          <el-form-item label="审批状态" prop="status">
            <el-select v-model="queryParams.status" placeholder="请选择">
              <el-option
                v-for="item in statusList"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="流程名称" prop="definitionName">
            <el-input
              v-model="queryParams.definitionName"
              placeholder="请输入流程名称"
              clearable
              @keyup.enter.native="handleQuery"
            />
          </el-form-item>
          <el-button
            type="primary"
            icon="el-icon-search"
            size="mini"
            @click="handleQuery"
            >搜索</el-button
          >
          <el-button icon="el-icon-refresh" size="mini" @click="resetQuery"
            >重置</el-button
          >
        </el-form>
      </div>
      <div class="list-wrapper">
        <el-table
          ref="tables"
          width="100%"
          height="100%"
          v-loading="loading"
          :data="allApprovalList"
        >
          <el-table-column type="selection" width="55" align="center" />
          <el-table-column label="审批状态" align="center" prop="statusToString" />
          <el-table-column
            label="流程名称"
            align="center"
            prop="processDefinitionName"
            :show-overflow-tooltip="true"
          />
          <el-table-column label="发起人" align="center" prop="initiator">
          </el-table-column>
          <el-table-column
            label="申请时间"
            align="center"
            prop="startDate"
            :show-overflow-tooltip="true"
          />
          <el-table-column
            label="任务节点"
            align="center"
            prop="taskName"
            width="100"
            :show-overflow-tooltip="true"
          />
          <el-table-column
            label="任务所属人"
            align="center"
            prop="assignee"
            width="100"
            :show-overflow-tooltip="true"
          />
          <el-table-column
            label="操作"
            align="center"
            class-name="small-padding fixed-width"
          >
            <template slot-scope="scope">
              <el-button
                size="mini"
                type="text"
                icon="el-icon-edit"
                @click="handleUpdate(scope.row)"
                v-hasPermi="['alarm:deviceRule:edit']"
                v-if="scope.row.status == '6'"
                >办理</el-button
              >
              <el-button
                size="mini"
                type="text"
                icon="el-icon-view"
                @click="handleView(scope.row, scope.index)"
                v-hasPermi="['monitor:operlog:query']"
                v-else
                >详情</el-button
              >
            </template>
          </el-table-column>
        </el-table>
        <pagination
          v-show="total > 0"
          :total="total"
          :page.sync="queryParams.pageNum"
          :limit.sync="queryParams.pageSize"
          @pagination="getTaskPageList"
        />
      </div>
    </template>
  </div>
</template>

<script>
import { getTaskPageList } from "@/api/internalApproval/allApprovals.js";
import ApproveDetail from "./approveDetail";
export default {
  data() {
    return {
      dateRange: [],
      queryParams: {
        pageNum: 1,
        pageSize: 10,
      },
      total: 0,
      allApprovalList: [],
      loading: false,
      isShowDetail: false,
      detail: {},
      statusList: [
        {
          value: "6",
          label: "待审批",
        },
        {
          value: "7",
          label: "已完成",
        },
      ],
      isShowDetail: false,
      detail: {},
    };
  },
  components: {
    ApproveDetail,
  },
  methods: {
    handleView(row) {
      this.detail = row;
      this.isShowDetail = true;
    },
    handleQuery() {
      this.queryParams.pageNum=1;
      this.getTaskPageList();
    },
    resetQuery() {
      this.resetForm("queryForm");
      this.handleQuery();
    },
    handleUpdate(row) {
      this.detail = row;
      this.isShowDetail = true;
    },
    handleCancelDetail() {
      this.isShowDetail = false;
      this.getTaskPageList();
    },
    async getTaskPageList() {
      this.loading = true;
      const result = await getTaskPageList({
        ...this.queryParams,
      });
      this.allApprovalList = result.data.list;
      this.total = result.data.total;
      this.loading = false;
    },
  },
  mounted() {
    this.getTaskPageList();
  },
};
</script>

<style lang="scss" scoped>
.all-approval {
}
.searchHeight {
  height: calc(100% - 54px) !important;
}
</style>